// Button

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './param';

@mixin button {
  border: $--x-border-width solid;
  border-radius: $--x-border-radius;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: $--x-font-size-small;
  text-align: center;
  background-clip: border-box;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: all $--x-animation-duration-base ease-in-out;
  &:focus {
    outline: none;
  }
  > .x-icon {
    font-size: 0.925rem;
  }
  @include flex-direction();
  &.x-direction-row {
    > .x-icon {
      margin-right: 0.25rem;
      margin-left: -0.25rem;
    }
  }
  &.x-direction-row-reverse {
    > .x-icon {
      margin-right: -0.25rem;
      margin-left: 0.25rem;
    }
  }
  &-icon.x-direction-row,
  &-icon.x-direction-row-reverse {
    > .x-icon {
      margin-right: 0;
      margin-left: 0;
    }
  }
  &-disabled {
    transform: none !important;
  }
  &-round {
    border-radius: 5rem;
  }
  &-circle {
    border-radius: 50%;
    padding: 0;
    width: 1.675rem;
  }
  &-only-icon,
  &-only-icon.#{$--x-button}-initial,
  &-text {
    border: none;
    background-color: transparent;
    box-shadow: none;
    &:focus,
    &:hover,
    &:active {
      @include button-color($--x-button-hover, rgba(0, 0, 0, 0.1), transparent);
    }
  }
  &-closable {
    color: $--x-text-400;
    &:hover {
      color: $--x-text-300;
    }
  }

  &-disabled.#{$--x-button}-activated.#{$--x-button}-initial {
    @include disabled($--x-primary-700, $--x-background, $--x-primary-700);
    &:hover,
    &:active {
      @include disabled($--x-primary-700, $--x-background, $--x-primary-700);
    }
  }
  &-disabled.#{$--x-button}-text,
  &-disabled.#{$--x-button}-only-icon {
    @include disabled($--x-button-disabled, transparent, transparent);
    &:hover,
    &:active {
      @include disabled($--x-button-disabled, transparent, transparent);
    }
  }

  @include size(big, $--x-height-big, 0 $--x-padding-big);
  @include size(large, $--x-height-large, 0 $--x-padding-large);
  @include size(medium, $--x-height-medium, 0 $--x-padding-medium);
  @include size(small, $--x-height-small, 0 $--x-padding-small);
  @include size(mini, $--x-height-mini, 0 $--x-padding-mini);
}

@mixin button-color($color, $background, $border) {
  color: #{$color};
  background-color: #{$background};
  border-color: #{$border};
}

@mixin button-type(
  $type,
  $color,
  $background,
  $border,
  $hover,
  $hover-background,
  $hover-border,
  $active,
  $active-background,
  $active-border,
  $disabled,
  $disabled-background,
  $disabled-border,
  $plain-color,
  $plain-background,
  $plain-border,
  $plain-hover,
  $plain-hover-background,
  $plain-hover-border,
  $plain-active,
  $plain-active-background,
  $plain-active-border,
  $plain-disabled,
  $plain-disabled-background,
  $plain-disabled-border,
  $box-shadow-color,
  $plain-box-shadow-color
) {
  &-#{$type} {
    @include button-color($color, $background, $border);
    &:hover {
      @include button-color($hover, $hover-background, $hover-border);
    }
    &:active {
      @include button-color($active, $active-background, $active-border);
    }
    &:focus {
      @include button-color($active, $active-background, $active-border);
      box-shadow: $--x-box-shadow-focus;
    }
    &.#{$--x-button}-disabled {
      @include disabled($disabled, $disabled-background, $disabled-border);
    }
    &-plain {
      @include button-color($plain-color, $plain-background, $plain-border);
      &:hover {
        @include button-color($plain-hover, $plain-hover-background, $plain-hover-border);
      }
      &:active {
        @include button-color($plain-active, $plain-active-background, $plain-active-border);
      }
      &:focus {
        @include button-color($plain-active, $plain-active-background, $plain-active-border);
        box-shadow: $--x-box-shadow-focus;
      }
      &.#{$--x-button}-disabled {
        @include disabled($plain-disabled, $plain-disabled-background, $plain-disabled-border);
      }
    }
    &.#{$--x-button}-activated {
      z-index: 2;
      @include button-color($active, $active-background, $active-border);
    }
  }
}

@mixin disabled($color, $bg-color, $border-color) {
  color: $color;
  cursor: not-allowed;
  background-image: none;
  background-color: $bg-color;
  border-color: $border-color;
  box-shadow: none;
  &:hover,
  &:active,
  &:focus {
    color: $color;
    background-color: $bg-color;
    border-color: $border-color;
  }
  &:active {
    .x-button-inner {
      transform: none;
    }
  }
}

@mixin buttons {
  display: inline-flex;
  position: relative;
  &:not(.#{$--x-buttons}-space) {
    > #{$--x-button} {
      .#{$--x-button} {
        border-left-width: $--x-border-width;
        border-right-width: $--x-border-width;
        border-radius: 0;
        position: relative;
        &-round {
          border-radius: 0;
        }
        &:focus,
        &-activated {
          z-index: 1;
        }
      }
      &:not(:first-child) .#{$--x-button} {
        margin-left: -1px;
      }
      &:hover {
        z-index: 1;
      }
      &:active {
        z-index: 2;
      }
      &:first-child {
        .#{$--x-button} {
          border-top-left-radius: 0.125rem;
          border-bottom-left-radius: 0.125rem;
        }
        .#{$--x-button}-round {
          border-top-left-radius: 5rem;
          border-bottom-left-radius: 5rem;
        }
      }
      &:last-child {
        .#{$--x-button} {
          border-top-right-radius: 0.125rem;
          border-bottom-right-radius: 0.125rem;
        }
        .#{$--x-button}-round {
          border-top-right-radius: 5rem;
          border-bottom-right-radius: 5rem;
        }
      }
    }
  }
  &-hiddenBorder {
    > #{$--x-button} {
      .#{$--x-button} {
        border: 0;
        padding: 0 0.4rem;
        background-color: transparent;
        &-icon {
          padding: 0 0.2rem;
          > .x-icon {
            font-size: 1.125rem;
          }
          &:hover {
            color: $--x-button-primary;
          }
        }
      }
    }
  }
}

@mixin buttons-type($type) {
  > #{$--x-button} {
    &:not(:first-child) {
      > .#{$--x-button}-#{$type} {
        border-left-color: rgba(255, 255, 255, 0.2);
      }
    }
  }
}
